<template>
  <div class="operator-home" v-loading="isLoading">
    <div class="header">
      <el-row :gutter="6">
        <el-col :span="6">
          <el-card>
            <template #header>
              <div class="center payment">本月代发总额(元)</div>
            </template>
            <div class="center content">{{data.monthTransactionAmount||'0.00'}}</div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card>
            <template #header>
              <div class="center monthCount">本月代发笔数(笔)</div>
            </template>
            <div class="center content">{{data.monthTransactionNumber||0}}</div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card>
            <template #header>
              <div style="background-color: #e46cbb;" class="center">今日代发总额(元)</div>
            </template>
            <div class="center content">{{data.dayTransactionAmount || '0.00'}}</div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card>
            <template #header>
              <div style="background-color: #9a66e4;" class="center payment">今日代发笔数(笔)</div>
            </template>
            <div class="center content">{{data.dayTransactionNumber || 0}}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <Chart />

    <div>
      <el-card>
        <template #header>
          <span>企业交易汇总统计</span>
        </template>

        <ElTableWithColumns :data="data.merBillList" :columns="merchantColumns" :pagerInfo="false" :height="300" />
      </el-card>
    </div>

    <HomeFooter />
  </div>
</template>

<script setup name="Index" lang="ts">
import Chart from './common/Chart.vue'
import HomeFooter from './common/Footer.vue';

import { useHomePageInfo } from './common/useHomePageInfo'


const { data, isLoading } = useHomePageInfo({})



const merchantColumns = [
  {
        title: "企业名称",
        align: "center",
        dataIndex: "name"
    }, {
        title: "今日交易笔数（笔）",
        align: "center",
        dataIndex: "dayTransactionNumber"
    }, {
        title: "今日交易金额（元）",
        align: "center",
        dataIndex: "dayTransactionAmount"
    }, {
        title: "本月交易笔数（笔）",
        align: "center",
        dataIndex: "monthTransactionNumber"
    }, {
        title: "本月交易金额（元）",
        align: "center",
        dataIndex: "monthTransactionAmount"
    }, {
        title: "本年交易笔数（笔）",
        align: "center",
        dataIndex: "yearTransactionNumber"
    }, {
        title: "本年交易金额（元）",
        align: "center",
        dataIndex: "yearTransactionAmount"
    }
]
</script>

<style scoped lang="scss">
.operator-home {
    padding: 10px;
    .header {
        :deep(.el-card__header) {
            padding: 0!important;
        }
    .payment {
        background-color: #2d8cf0;
    }
    .monthCount {
        background-color: #f90;
    }
     .center {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        font-size: 16px;
        color: #fff;
        }

    .content {
        color: #000;
        font-size: 28px;
    }
    }

}
</style>
